<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import Http from "@/http/http.js";
import {onMounted, ref} from "vue";
import {Message} from "@arco-design/web-vue";
import {getImgUrl} from "@/until/tool.js";

const isSea = ref(false);
const CertNum = ref("");
const certData = ref(null);

const sea = async () => {
  if (!CertNum.value) {
    Message.error('请输入编号！')
    return
  }
  isSea.value = true;
  const res = await Http.cert({cert: CertNum.value});
  if (!res.Data) {
    certData.value = null;
    return
  }
  certData.value = [
    {label: "名称", value: res.Data[0].CertName},
    {label: "编号", value: res.Data[0].CertNum},
    {label: "预览图", value: getImgUrl(res.Data[0].CertImg)},
    {label: "简述", value: res.Data[0].CertCon},
  ]
}
</script>

<template>
  <div class="c_banner">
    <div class="subpage_ad">
      <div class="bgimg pcitem"
           style="background-image: url(http://www.kjjcgroup.com/static/upload/image/20240309/1709960369399874.jpg)"></div>
      <div class="text capitalize">
        <div class="ad-tit">
          报告查询 <br>
        </div>
      </div>
    </div>
  </div>
  <div class="wid p-t-10px p-b-10px">
    <a-space>
      <div class="">
        <icon-home/>
        您当前的位置:
      </div>
      <a-breadcrumb>
        <a-breadcrumb-item><a href="/">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item>报告查询</a-breadcrumb-item>
      </a-breadcrumb>
    </a-space>
  </div>
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>报告查询</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <ul>
            <li>
              <a href="/company">公司简介</a>
            </li>
            <li>
              <a href="/contact">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="right_title">
        <span>报告查询</span>
      </div>
      <div class="right_con">
        <div class="">
          <p>
            <a-input v-model="CertNum" :style="{width:'420px'}" placeholder="请输入报告编号" search-button
                     button-text="查询"/>
          </p>
          <p>
            <a-button type="primary" @click="sea">查询</a-button>
          </p>
        </div>
        <div class="m-t-20px m-b-50px">
          <template v-if="!certData && isSea">
            <span style="font-size: 20px;">未查询到报告！</span>
          </template>
          <template v-else>
            <table style="width: 50%;margin: 0 auto;">
              <tr v-for="item of certData">
                <td style="">{{ item.label }}:&nbsp;</td>
                <td style="text-align: left;font-size: 16px;">
                  <template v-if="item.label ==='预览图'">
                    <img width="100%" :src="item.value" alt=""/>
                  </template>
                  <template v-else>
                    {{ item.value }}
                  </template>
                </td>
              </tr>
            </table>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.right_con {
  margin-top: 50px;
  text-align: center;
}

table {
  tr {
    td {
      border-bottom: 1px solid #ccc;
      padding: 5px 0;
    }
  }
}

</style>